<template>
    <div class="item">
        <router-link :to="item.path">
            <div class="item-img">
                <i class="iconfont" :class="item.img"></i>
            </div>
            <div class="item-title">
                <span v-text="item.title"></span>
            </div>
        </router-link>
    </div>
</template>

<script type="text/ecmascript-6">
    /**
     * @author 白雨浓
     * @date 2018/9/21 18:37
     *
     * 菜单item
     **/
    export default {
        name: 'HomeMenuItem',
        props: ['item'],
        data() {
            return {}
        },
        mounted() {
            this.$nextTick(() => {

            })
        },
        methods: {}
    }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

    item-w = 150px
    item-h = 110px

    .item {
        display inline-block
        position relative
        width item-w
        height item-h
        margin 10px 20px

        text-align center

        color white

        background-color rgba(58, 142, 220, .5)
        transition background-color 1s

        cursor pointer

        &:hover {
            background-color rgba(230, 62, 130, .5)
        }

        &:hover .item-title {
            display inline-block
        }

        &:hover .item-img {
            opacity 0
        }
    }

    .item-img {
        position absolute
        top 50%
        left 50%
        width img-w = item-w * .6
        height img-h = item-h * .6
        line-height img-h
        margin-left -(img-w / 2)
        margin-top -(img-h / 2)
        opacity 1
        transform opacity 1s

        i {
            width img-w * .9
            height img-h * .9
            font-size 5ex
            color white
        }
    }

    .item-title {
        position absolute
        top 0
        left 0
        display none
        width item-w
        height item-h
        line-height 110px
        color white
    }

</style>
